<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>商品类别七日销量数据分析</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
    </head>
    <body>
        <div class="x-body">
            <div id="main" style="width: 1260px;height:500px;"></div>
        </div>
        <script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript">

            $.ajax({
                type: "GET",
                url: "order/getCategoryWeekSales",
                success: function (res) {
                    console.log(res)
                    var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '商品类别七日销量图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:res.data[0]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:res.data[1]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'新鲜蔬菜',
                    type:'line',
                    // stack: '总量',//如何都是一样的值会导致相同值叠加问题
                    data:res.data[2][0]
                },
                {
                    name:'时令水果',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][1]
                },
                {
                    name:'乳饮酒水',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][2]
                },
                {
                    name:'零食小吃',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][3]
                },
                {
                    name:'肉蛋水产',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][4]
                } ,      {
                    name:'粮油调味',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][5]
                },
                {
                    name:'个护美妆',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][6]
                },
                {
                    name:'家清纸品',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][7]
                },
                {
                    name:'日用百货',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][8]
                },
                {
                    name:'绿植花卉',
                    type:'line',
                    // stack: '总量',
                    data:res.data[2][9]
                }
            ]
        };
        myChart.setOption(option);
                }})
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
    </body>
</html>